import resize from "./resize";

let width, height, canvas, ctx, circles = [], settings

let initContainer = function initContainer (that) {
     width, height, canvas, ctx, circles = [], settings = that.opts

    width = window.innerWidth
    height = window.innerHeight
    canvas = that.$refs.canvas
    canvas.width = width
    canvas.height = height
    ctx = canvas.getContext('2d')
    for (let x = 0; x < width * settings.densety; x++) {
        let c = new Circle()
        circles.push(c)
    }
    animate()
}

function animate () {
    cancelAnimationFrame(self.requestAniId)
    ctx.clearRect(0, 0, width, height)
    for (let i in circles) {
        circles[i].draw()
    }
    self.requestAniId = requestAnimationFrame(animate)
}

function Circle () {
    var self = this
    this.pos = {}
    init()

    function init () {
        self.pos.x = Math.random() * width
        self.pos.y = height + Math.random() * 100
        self.alpha = 0.1 + Math.random() * settings.clearOffset
        self.scale = 0.1 + Math.random() * 0.3
        self.speed = Math.random()
        self.color = settings.color === 'random' ? that.randomColor() : settings.color
    }

    this.draw = function () {
        if (self.alpha <= 0) {
            init();
        }
        self.pos.y -= self.speed
        self.alpha -= 0.0005
        ctx.beginPath()
        ctx.arc(self.pos.x, self.pos.y, self.scale * settings.radius, 0, 2 * Math.PI, false)
        ctx.fillStyle = self.color
        ctx.fill()
        ctx.closePath()
    };
}

resize(() => {
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;
})


export default initContainer
